<template>
  <div class="container">
    <div class="tab-box-container">
      <div class="tab-box">
        <div class="title tab-btn" @click="addTabs">添加Whatsapp</div>
        <div
          v-if="tabArr.length > 0"
          class="title tab-btn tab-btn-no-count"
          :class="{ 'tab-btn-count': unreadCount !== 0 }"
        >
          {{ unreadCountText }}
        </div>
        <div class="title tab-btn logout-btn" @click="handleLogout">退出登录</div>
        <div class="list-box">
          <div class="tab-list">
            <div
              v-for="(item, index) in tabArr"
              :key="index"
              class="tab-btn tab-item"
              :class="{ 'active-tab-item': index === currentIndex }"
              @click.stop="changeTabs(index)"
            >
              <div class="df-item">
                <div
                  v-for="(itm, index2) in item.urls"
                  :key="index2"
                  class="tab-item-title"
                  :style="{ padding: index2 === 1 ? '5px' : '0' }"
                  :class="{ 'active-tab-title': index === currentIndex }"
                  @click.stop="switchToTab(index, index2)"
                >
                  <div v-if="index2 === 1" class="title-name">
                    {{ itm.name }}
                    <!-- 添加未读消息红点提示 -->
                    <span v-if="itm.hasNewMessage" class="message-dot"></span>
                  </div>
                  <div v-if="index2 === 1" class="change-name" @click.stop="switchToTab(index, 0)">♟</div>
                  <div v-if="index2 === 1" class="change-name" @click="changeName(index, index2)">🖊</div>
                  <div v-if="index2 === 1" class="input-box">
                    <input
                      v-if="itm.isEditing"
                      type="text"
                      :value="itm.name"
                      :data-tab-index="index"
                      :data-url-index="index2"
                      @blur="blurNameValue(index, index2, $event)"
                    />
                  </div>
                </div>
              </div>
              <div class="close" @click.stop="deleteTabItem(index)">X</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { ref, onMounted, onUnmounted, nextTick, computed } from 'vue';
  import { useRouter } from 'vue-router';
  import { logout } from '../../../api/user';
  // 假设预加载脚本已经暴露了 electron 和 api 对象
  const { api } = window;
  const router = useRouter();

  const tabArr = ref([]);
  const currentIndex = ref(0); // 当前选中的标签页索引
  const currentSubIndex = ref(0); // 当前选中的子标签页索引
  const unreadCount = ref(0); // 未读消息总数

  // 计算未读消息显示文本
  const unreadCountText = computed(() => {
    return unreadCount.value > 0 ? `${unreadCount.value}条未读消息` : '无未读消息';
  });

  // 监听未读消息数量更新
  const handleUnreadCountUpdate = (_, count) => {
    unreadCount.value = count;
  };

  // 监听新消息事件
  const handleNewMessage = (_, tabIndex, urlIndex) => {
    // 确保tabArr中有对应的标签页和URL
    if (tabArr.value[tabIndex] && tabArr.value[tabIndex].urls[urlIndex]) {
      // 设置新消息标志
      tabArr.value[tabIndex].urls[urlIndex].hasNewMessage = true;
    }
  };

  // 监听消息状态清除事件
  const handleMessageStatusCleared = (_, tabIndex, urlIndex) => {
    console.log(`收到消息状态清除通知: 标签页 ${tabIndex}, 子标签 ${urlIndex}`);
    if (tabArr.value[tabIndex] && tabArr.value[tabIndex].urls[urlIndex]) {
      tabArr.value[tabIndex].urls[urlIndex].hasNewMessage = false;
    }
  };
  // 初始化标签页
  const initTabs = async () => {
    // 检查登录状态
    const token = localStorage.getItem('token');
    if (!token) {
      router.push('/login');
      return;
    }

    // 用户已登录，加载标签页
    const storedTabs = await api.loadTabs();

    // 确保所有标签页的isEditing属性都被初始化为false
    storedTabs.forEach((tab) => {
      if (tab.urls) {
        tab.urls.forEach((url) => {
          // 确保isEditing属性存在且为false
          url.isEditing = false;
          // 确保hasNewMessage属性存在
          if (url.hasNewMessage === undefined) {
            url.hasNewMessage = false;
          }
        });
      }
    });

    // 获取后端视图信息，用于验证视图索引
    try {
      const viewsInfo = await api.debugViews();

      // 检查并修复每个标签页的索引
      storedTabs.forEach((tab) => {
        const partition = tab.partition;
        // 找出属于这个分区的所有视图
        const partitionViews = viewsInfo.filter((v) => v.partition === partition);

        // 如果找到了视图，则更新urls中的索引
        if (partitionViews.length > 0) {
          tab.urls.forEach((url, i) => {
            if (i < partitionViews.length) {
              url.index = partitionViews[i].index;
            }
          });
        }
      });
    } catch (error) {
      console.error('初始化时获取视图信息失败:', error);
    }

    tabArr.value = storedTabs;

    if (tabArr.value.length > 0) {
      // 默认选中第一个标签页
      currentIndex.value = 0;
      // 默认选中第二个子标签（WhatsApp页面）
      currentSubIndex.value = 1;

      try {
        // 确保使用正确的视图索引调用switchBrowserView
        const firstTab = tabArr.value[currentIndex.value];
        if (firstTab && firstTab.urls && firstTab.urls[currentSubIndex.value]) {
          const viewIndex = firstTab.urls[currentSubIndex.value].index;
          api.switchBrowserView(viewIndex);
        }
      } catch (error) {
        console.error('初始化标签页切换失败:', error);
      }
    }
  };
  const switchToTab = (index, subIndex = null) => {
    // 检查标签页是否存在
    if (!tabArr.value[index]) {
      // console.error(`错误: 标签页索引 ${index} 不存在`);
      return;
    }

    currentIndex.value = index;
    // 如果提供了子标签索引，则更新currentSubIndex
    if (subIndex !== null) {
      currentSubIndex.value = subIndex;
    }

    try {
      // 在新的数据结构中，我们需要找到对应标签页中的页面索引
      if (tabArr.value[index] && tabArr.value[index].urls && tabArr.value[index].urls.length > currentSubIndex.value) {
        // 使用当前选中的子标签索引
        const viewIndex = tabArr.value[index].urls[currentSubIndex.value].index;

        // 在切换前尝试获取视图的实际状态
        api
          .debugViews()
          .then((views) => {
            // 执行切换
            api.switchBrowserView(viewIndex);
          })
          .catch((err) => {
            console.error('获取视图信息失败:', err);
            // 仍然尝试切换
            api.switchBrowserView(viewIndex);
          });

        // 如果切换到的是WhatsApp页面(subIndex为1)，清除新消息提示
        if (subIndex === 1 && tabArr.value[index].urls[subIndex] && tabArr.value[index].urls[subIndex].hasNewMessage) {
          tabArr.value[index].urls[subIndex].hasNewMessage = false;
          api.clearNewMessage(index, subIndex);
        }
      } else {
        // 兼容旧结构或异常情况
        api.switchBrowserView(index);
      }
    } catch (error) {
      console.error('切换标签页时出错:', error);
    }
  };
  const deleteTabItem = async (index) => {
    // 在删除前先保存要删除的标签页信息

    // 保存要删除的标签页信息
    const tabToDelete = tabArr.value[index];

    // 先从数组中移除该标签页
    tabArr.value.splice(index, 1);

    // 生成可序列化的 tabArr 数据（保持原有tabArr结构，只移除删除的项）
    let serializableTabArr = JSON.parse(
      JSON.stringify(
        tabArr.value.map((tab) => {
          const { title, partition, index, urls } = tab;
          return {
            title,
            partition,
            index, // 保持原有的index不变
            urls,
          };
        }),
      ),
    );

    // 使用保存的标签页信息来删除相关的BrowserView
    if (tabToDelete && tabToDelete.urls) {
      // 删除第一个URL对应的BrowserView（扩展设置页面）
      // 注意: 这里只需删除一个视图，后端会根据分区信息删除所有相关视图
      const firstUrlItem = tabToDelete.urls[0];
      if (firstUrlItem && firstUrlItem.index !== undefined) {
        api.removeBrowserView(firstUrlItem.index, serializableTabArr);

        // 等待一小段时间，确保后端有足够时间处理删除操作
        await new Promise((resolve) => setTimeout(resolve, 300));

        // 从后端获取最新的视图信息
        try {
          const viewsInfo = await api.debugViews();

          // 根据最新的视图信息更新前端tabArr中的索引
          for (const tab of tabArr.value) {
            const partition = tab.partition;
            // 找出属于这个分区的所有视图
            const partitionViews = viewsInfo.filter((v) => v.partition === partition);

            // 如果找到了视图，则更新urls中的索引
            if (partitionViews.length > 0) {
              tab.urls.forEach((url, i) => {
                if (i < partitionViews.length) {
                  url.index = partitionViews[i].index;
                }
              });
            }
          }

          // 再次序列化更新后的tabArr，以便保存
          serializableTabArr = JSON.parse(
            JSON.stringify(
              tabArr.value.map((tab) => {
                const { title, partition, index, urls } = tab;
                return {
                  title,
                  partition,
                  index,
                  urls,
                };
              }),
            ),
          );

          // 保存更新后的tabArr
          await api.saveTabs(serializableTabArr);
        } catch (error) {
          console.error('获取删除后视图信息失败:', error);
        }
      }
    }

    // 如果删除后没有标签页了，重置currentIndex
    if (tabArr.value.length === 0) {
      currentIndex.value = -1;
      currentSubIndex.value = 0;
    } else {
      // 如果删除的是当前标签页或之前的标签页，需要调整currentIndex
      if (index === currentIndex.value) {
        // 如果删除的是当前激活的标签页，则激活下一个标签页
        // 如果删除的是最后一个标签页，则激活新的最后一个标签页
        currentIndex.value = Math.min(index, tabArr.value.length - 1);
        // currentSubIndex.value = currentSubIndex.value; // 保持当前子标签索引不变
      } else if (index < currentIndex.value) {
        // 如果删除的是当前标签页之前的标签页，当前索引需要减1
        currentIndex.value--;
      }

      // 切换到新的当前标签页
      changeTabs(currentIndex.value);
    }
  };

  const addTabs = async () => {
    // 生成唯一的分区名称，使用时间戳确保唯一性
    const timestamp = Date.now();
    const uniquePartition = `tab_${timestamp}`;

    try {
      // 首先创建扩展设置页面
      const extensionPath = 'chrome-extension://ekaocdggcoffjhdaaddndakidgonodhe/options.html#/settings/general';

      const extensionIndex = await api.createBrowserView(extensionPath, uniquePartition);

      if (extensionIndex === null) {
        console.error('创建扩展设置页面失败');
        return;
      }

      // 然后创建WhatsApp页面
      const whatsappUrl = 'https://web.whatsapp.com/';

      const whatsappIndex = await api.createBrowserView(whatsappUrl, uniquePartition);

      if (whatsappIndex === null) {
        console.error('创建WhatsApp页面失败');
        return;
      }

      // 创建新标签页的索引（在tabArr中的位置）
      const newTabIndex = tabArr.value.length;

      // 查找当前最大的index值，确保新标签页的index是唯一的
      let maxIndex = -1;
      tabArr.value.forEach((tab) => {
        if (tab.index > maxIndex) {
          maxIndex = tab.index;
        }
      });
      const newIndex = maxIndex + 1; // 使用最大index值+1作为新标签页的index

      // 创建新的标签页对象，符合新的数据结构
      const newTab = {
        title: `persist:${uniquePartition}`,
        partition: uniquePartition,
        index: newIndex, // 使用唯一的index值
        urls: [
          {
            url: extensionPath,
            name: `翻译设置`,
            partition: uniquePartition,
            index: extensionIndex,
            isEditing: false,
            hasNewMessage: false,
          },
          {
            url: whatsappUrl,
            name: `ws页面`,
            partition: uniquePartition,
            index: whatsappIndex,
            isEditing: false, // 添加初始状态
            hasNewMessage: false, // 初始化消息状态
          },
        ],
      };

      tabArr.value.push(newTab);

      // 设置当前索引为新创建的标签页
      currentIndex.value = newTabIndex;
      // 默认显示WhatsApp页面
      currentSubIndex.value = 1;

      // 切换到WhatsApp页面
      const viewIndexToShow = whatsappIndex;
      api.switchBrowserView(viewIndexToShow);

      // 确保传递的数据是可克隆的
      const serializableTabArr = JSON.parse(
        JSON.stringify(
          tabArr.value.map((tab) => {
            const { title, partition, index, urls } = tab;
            return {
              title,
              partition,
              index,
              urls,
            };
          }),
        ),
      );

      console.log('保存标签页数据到后端');
      await api.saveTabs(serializableTabArr);

      // 为新添加的WhatsApp页面启动消息监听
      console.log(`为新标签页 ${newTabIndex} 启动消息监听`);
      setTimeout(() => {
        api.startMessageMonitoring(newTabIndex, 1); // urlIndex为1是WhatsApp页面
      }, 5000); // 延迟5秒，确保页面加载完成
    } catch (error) {
      console.error('添加标签页失败:', error);
    }
  };

  const changeTabs = (index) => {
    // 检查标签页是否存在
    if (!tabArr.value[index]) {
      // console.error(`错误: 标签页索引 ${index} 不存在`);
      return;
    }

    currentIndex.value = index;

    try {
      // 切换到新标签时，保持当前子标签索引不变
      // 在新的数据结构中，我们需要找到对应标签页中的页面索引
      if (tabArr.value[index] && tabArr.value[index].urls && tabArr.value[index].urls.length > currentSubIndex.value) {
        // 使用当前选中的子标签索引
        const viewIndex = tabArr.value[index].urls[currentSubIndex.value].index;

        api.switchBrowserView(viewIndex);
      } else {
        // 兼容旧结构或异常情况
        console.log(`兼容模式切换标签到视图索引: ${index}`);
        api.switchBrowserView(index);
      }
    } catch (error) {
      console.error('切换标签时出错:', error);
    }
  };

  // 启动所有WhatsApp页面的消息监听
  const startAllMessageMonitoring = () => {
    tabArr.value.forEach((tab, tabIndex) => {
      // WhatsApp页面的urlIndex固定为1
      const urlIndex = 1;
      if (tab.urls && tab.urls[urlIndex]) {
        api.startMessageMonitoring(tabIndex, urlIndex);
      }
    });
  };

  // 处理点击事件，如果点击的不是输入框或编辑按钮，则关闭所有输入框
  const handleClickOutside = (event) => {
    // 检查点击的元素是否是输入框或编辑按钮
    const isInput = event.target.tagName.toLowerCase() === 'input';
    const isEditButton = event.target.closest('.change-name');

    // 如果不是输入框或编辑按钮，关闭所有输入框
    if (!isInput && !isEditButton) {
      tabArr.value.forEach((tab) => {
        tab.urls.forEach((url) => {
          if (url.isEditing) {
            url.isEditing = false;
          }
        });
      });
    }
  };

  onMounted(() => {
    initTabs();

    // 注册新消息事件监听器
    api.onNewMessage(handleNewMessage);

    // 注册消息状态清除事件监听器
    api.onMessageStatusCleared(handleMessageStatusCleared);

    // 注册未读消息数量更新事件监听器
    api.onUnreadCountUpdate(handleUnreadCountUpdate);

    // 只有在用户已登录状态下才启动消息监听
    const token = localStorage.getItem('token');
    if (token) {
      // 延迟启动消息监听，确保页面已完全加载
      setTimeout(() => {
        startAllMessageMonitoring();
      }, 5000);
    }

    // 添加全局点击事件监听器
    document.addEventListener('click', handleClickOutside);
  });

  onUnmounted(() => {
    // 移除事件监听器
    if (api.onNewMessage) {
      api.onNewMessage(null);
    }

    // 移除消息状态清除事件监听器
    if (api.onMessageStatusCleared) {
      api.onMessageStatusCleared(null);
    }

    // 移除未读消息数量更新事件监听器
    if (api.onUnreadCountUpdate) {
      api.onUnreadCountUpdate(null);
    }

    // 停止所有消息监听
    tabArr.value.forEach((tab, tabIndex) => {
      const urlIndex = 1; // WhatsApp页面
      if (tab.urls && tab.urls[urlIndex]) {
        api.stopMessageMonitoring(tabIndex, urlIndex);
      }
    });

    // 移除全局点击事件监听器
    document.removeEventListener('click', handleClickOutside);
  });

  // 处理退出登录
  const handleLogout = async () => {
    try {
      // 在退出登录前停止所有消息监听
      stopAllMessageMonitoring();

      // 清除所有标签页的新消息状态和角标
      tabArr.value.forEach((tab, tabIndex) => {
        // WhatsApp页面的urlIndex固定为1
        const urlIndex = 1;
        if (tab.urls && tab.urls[urlIndex]) {
          // 清除UI上的新消息标记
          tab.urls[urlIndex].hasNewMessage = false;
          // 通知主进程清除该标签页的新消息状态
          api.clearNewMessage(tabIndex, urlIndex);
        }
      });

      await logout();

      // 导入自动登录服务
      const { disableAutoLogin } = await import('../../../utils/autoLoginService');

      // 禁用自动登录但保留凭据，这样下次打开应用时不会自动登录，但会自动填充表单
      disableAutoLogin();

      // 通知主进程用户已退出登录
      api.loginStatusChanged(false);

      // 退出登录后跳转到登录页
      router.push('/login');
    } catch (error) {
      console.error('退出登录失败: ', error);
    }
  };

  // 停止所有WhatsApp页面的消息监听
  const stopAllMessageMonitoring = () => {
    tabArr.value.forEach((tab, tabIndex) => {
      // WhatsApp页面的urlIndex固定为1
      const urlIndex = 1;
      if (tab.urls && tab.urls[urlIndex]) {
        api.stopMessageMonitoring(tabIndex, urlIndex);
      }
    });
  };
  const changeName = (index, index2) => {
    tabArr.value.forEach((tab) => {
      tab.urls.forEach((url) => {
        url.isEditing = false;
      });
    });
    // 打开当前编辑状态
    tabArr.value[index].urls[index2].isEditing = true;

    // 使用nextTick确保DOM更新后再聚焦输入框
    nextTick(() => {
      // 找到当前编辑的输入框并聚焦
      // 使用数据属性选择器，确保选中正确的输入框
      const inputElement = document.querySelector(`input[data-tab-index="${index}"][data-url-index="${index2}"]`);
      if (inputElement) {
        inputElement.focus();
      }
    });
  };
  const blurNameValue = async (index, index2, e) => {
    const value = e.target.value;

    // 只有当输入值不为空时才进行更改
    if (value.trim() !== '') {
      tabArr.value[index].urls[index2].name = value;

      // 确保传递的数据是可克隆的
      const serializableTabArr = JSON.parse(
        JSON.stringify(
          tabArr.value.map((tab) => {
            const { title, partition, index, urls } = tab;
            return {
              title,
              partition,
              index,
              urls,
            };
          }),
        ),
      );
      const arr = await api.saveTabs(serializableTabArr);
      tabArr.value = arr;
    }

    // 无论如何都关闭编辑状态
    tabArr.value[index].urls[index2].isEditing = false;
  };
</script>

<style lang="less">
  .container {
    width: 100%;
    height: 100vh;
    background-color: #ffffff;

    // 消息提示红点样式
    .message-dot {
      display: inline-block;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: #ff4d4f;
      margin-left: 5px;
      position: relative;
      top: -2px;
    }
    .tab-box-container {
      height: 100%;
      background-image: linear-gradient(0deg, #16222a, #3a6073);
      .tab-box {
        position: fixed;
        left: 0;
        top: 0;
        display: flex;
        flex-direction: column;
        padding: 10px;
        height: 93%;
        background-image: linear-gradient(0deg, #16222a, #3a6073);
        .tab-btn {
          width: 185px;
          background-color: #5cdbd3;
          color: #000000;
          text-align: center;
          padding: 5px 0;
          border-radius: 8px;
          cursor: pointer;
          margin-bottom: 10px;
          &:hover {
            color: #000;
            background-color: #c7ccd9;
          }
        }
        .tab-btn-no-count {
          font-size: 14px;
          color: #000000;
        }
        .tab-btn-count {
          color: #ff4d4f;
          font-size: 14px;
        }
        .logout-btn {
          position: fixed;
          bottom: 10px;
          left: 10px;
          background-color: #ff4d4f;
          color: #ffffff;
          height: 30px;
          line-height: 30px;
          padding: 0;
          &:hover {
            background-color: #ff7875;
          }
        }
        .debug-btn {
          position: fixed;
          bottom: 50px;
          left: 10px;
          background-color: #1890ff;
          color: #ffffff;
          height: 30px;
          line-height: 30px;
          padding: 0;
          &:hover {
            background-color: #40a9ff;
          }
        }
        .list-box {
          width: 100%;
          height: calc(100% - 80px);
          .tab-list {
            width: 100%;
            height: 100%; /* 修改高度，留出底部退出登录按钮的空间 */
            display: flex;
            flex-direction: column;
            overflow-y: scroll;
            // 隐藏滚动条
            scrollbar-width: none;
            -ms-overflow-style: none;
            &::-webkit-scrollbar {
              display: none;
            }
            .tab-btn {
              margin: 5px 0;
            }
            .active-tab-item {
              background-color: #fff;
              color: #000;
            }
            .active-tab-title {
              background-color: #5cdbd3;
              border-radius: 10px;
            }
            .tab-item {
              display: flex;
              align-items: center;
              justify-content: space-around;
              .df-item {
                width: 80%;
                display: flex;
                align-items: center;
                flex-direction: column;
                font-size: 13px;
                .tab-item-title {
                  width: 100%;
                  padding: 5px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  position: relative;
                  .title-name {
                    width: 80%;
                    font-size: 14px;
                    // 超出省略号
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                  }
                  .change-name {
                    width: 20px;
                    height: 20px;
                    &:hover {
                      color: red;
                    }
                  }
                  .input-box {
                    width: 70%;
                    position: absolute;
                    z-index: 80;
                    left: 50%;
                    transform: translateX(-50%);
                    input {
                      width: 100%;
                    }
                  }
                  &:hover {
                    background-color: rgb(197, 197, 197);
                    border-radius: 10px;
                  }
                }
              }
              .title {
                width: 80%;
                font-size: 14px;
                // 超出省略号
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
              .close {
                width: 14px;
                height: 14px;
                padding: 5px;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 50%;
                color: #1f1f1f;
                font-size: 10px;
                &:hover {
                  background-color: #dcdcdd;
                }
              }
            }
          }
        }
      }
    }
  }
</style>
